<template>
  <div class="orderList-wrapper" ref="orderList" :style="windowHeight">
    <div>
      <div v-if="orders.length > 0" class="orderList" v-for="(ow,index) in orders" :key="index">
        <div class="orderList-top">
          总价：<span class="amount">￥{{ow.order.orderAmount}}</span>
          时间：<span class="time">{{ow.orderTime}}</span>
        </div>
        <div class="orderList-bottom">
          <ul>
            <li class="orderDetail-item" v-for="(od,index2) in ow.orderDetails" :key="index2">
              <div class="foodname">{{od.foodName}}</div>
              <div class="foodprice">￥{{od.foodPrice}}</div>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="orders.length <= 0" class="noOrders">暂无订单记录</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';

  export default {
    data() {
      return {
        orders: []
      };
    },
    props: {
      user: {}
    },
    created() {
      this.$nextTick(() => {
        this.orderScroll = new BScroll(this.$refs.orderList, {
          click: true
        });
      });
      this.loadOrderData();
    },
    methods: {
      async loadOrderData() {
        const data = {
          'userId': this.user.userId
        };
        const response = await this.$store.order.list(data);
        this.orders = response.object;
        if (this.orderScroll) {
          this.orderScroll.refresh();
        }
      }
    },
    mounted() {
      this.loadOrderData();
    },
    computed: {
      windowHeight() {
        return `height:${window.outerHeight - 174}px`;
      }
    }
  };
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .orderList-wrapper
    overflow hidden
    .orderList
      .orderList-top
        font-size 16px
        font-weight 200
        padding 0 18px
        height 40px
        line-height 40px
        background-color #f3f5f7
        .amount
          color rgb(240, 20, 20)
          padding-right 20px
        .time
          color rgb(240, 20, 20)
      .orderList-bottom
        padding 0 18px
        .orderDetail-item
          height 48px
          line-height 48px
          border-bottom 1px solid rgba(7, 17, 27, 0.1)
          .foodname
            float left
          .foodprice
            float right
            color rgb(240, 20, 20)
    .noOrders
      text-align center
      color rgb(240, 20, 20)
      margin-top 80px
</style>
